<template>
  <div class="my-bigbox">
    <div class="mymessage">
      <div class="mybox">
        <div class="myHead">
          <img :src="myList.userImg" alt="" />
        </div>

        <div class="myName">
          {{ myList.userName }}
          <img
            @click="updateName"
            src="../../assets/img/my/update.svg"
            alt=""
          />
        </div>

        <div class="signOut" @click="zhuxiao">退出登录</div>

        <div class="updateImg" @click="updateImg">
          <div>修改头像</div>
        </div>

        <div class="mylove" @click="goLove">
          <div>
            <img v-if="love" src="../../assets/img/my/shouc2.svg" alt="" />
            <img v-else src="../../assets/img/my/shouc1svg.svg" alt="" />
          </div>
          <div>喜欢</div>
        </div>

        <div
          class="mylove"
          :class="{ myActive: history == true }"
          @click="shitoryClick"
        >
          <div>
            <img v-if="history" src="../../assets/img/my/history2.svg" alt="" />
            <img v-else src="../../assets/img/my/history1.svg" alt="" />
          </div>
          <div>历史</div>
        </div>
      </div>

      <div class="my-right">
        <div class="mytop">
          <div>历史记录</div>
          <div class="deleteAll">
            <div class="dele-piliang" @click="deletePiLiang">批量删除</div>
            <div @click="deleteAll">全部删除</div>
          </div>
        </div>

        <div
          class="history-bottom"
          v-for="(item, index) in myHistoryList"
          :key="index"
        >
          <div class="history-item">
            <div class="history-checkbox">
              <input
                type="checkbox"
                value="index"
                @click="getDeleteItem(index)"
              />
            </div>
            <div class="history-name" @click="goFoodItem(index)">
              {{ myHistoryList[index].fname }}
            </div>

            <div class="history-tiem">
              {{ myHistoryList[index].hdateTime }}
            </div>

            <div class="history-del" @click="singleDeletion(index)">×</div>
          </div>
        </div>

        <div class="nolover" v-if="!myHistory">
          <div>
            <img src="../../assets/img/my/meiyoulove.svg" alt="" />
            <div class="nolover-message">暂无历史记录</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="updateOut">
      <update-img></update-img>
    </div>

    <div v-if="updateNames">
      <update-name v-on:childByOut="childByOut"></update-name>
    </div>
  </div>
</template>

<script>
import UpdateImg from "../updateimg/UpdateImg.vue";
import { request } from "../../network/request";
import UpdateName from "../updateimg/UpdateName.vue";
export default {
  components: { UpdateImg, UpdateName },
  name: "MyHistory",
  data() {
    return {
      love: false,
      history: true,
      myLove: null,
      myHistory: true,
      updateOut: "",
      myHistoryList: "",
      updateNames: "",
      myList: "",
      picked: "",
      deleteItem: "",
    };
  },
  created() {
    request({
      url: "/user/queryUserInfo",
      method: "post",
      params: {
        userId: sessionStorage.getItem("userid"),
      },
    })
      .then((res) => {
        this.myList = res.data.data;
        console.log(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });

    request({
      url: "/user/queryHistory",
      params: {
        userId: sessionStorage.getItem("userid"),
      },
    })
      .then((res) => {
        if (res.data.data.length != 0) {
          this.myHistory = true;
        } else {
          this.myHistory = false;
        }
        this.myHistoryList = res.data.data;
        console.log(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    shitoryClick() {
      this.love = false;
      this.history = true;
    },
    updateImg() {
      this.updateOut = true;
    },
    deleteAll() {
      this.$confirm("此操作将永久删除所有记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request({
          url: "/user/deleteUserIdHistory",
          params: {
            userId: sessionStorage.getItem("userid"),
          },
        })
          .then((res) => {
            console.log(res);
            location.reload();
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    childByOut: function (childValue) {
      this.updateNames = childValue;
      console.log(this.updateOut);
    },
    zhuxiao() {
      sessionStorage.setItem("userid", null);
      this.$router.push("/homepage");
      location.reload();
    },
    updateName() {
      this.updateNames = true;
    },
    goLove() {
      this.$router.push("/mypage");
    },
    singleDeletion(index) {
      request({
        url: "/user/deleteHistory",
        params: {
          hId: this.myHistoryList[index].hid,
        },
      })
        .then((res) => {
          this.$alert("删除成功", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
              location.reload();
            },
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDeleteItem(index) {
      //判断复选框是否被选中
      if (event.target.checked) {
        this.deleteItem += this.myHistoryList[index].hid + ",";
      } else {
        this.deleteItem = this.deleteItem.replace(
          this.myHistoryList[index].hid + ",",
          ""
        );
      }
    },
    deletePiLiang() {
      if (this.deleteItem == "") {
        this.$alert("未选择任何值,请勾选", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        request({
          url: "/user/deleteMoreUserIdHistory",
          method: "post",
          params: {
            moreUserId: this.deleteItem,
          },
        })
          .then((res) => {
            console.log(this.deleteItem);
            this.$alert("删除成功", {
              confirmButtonText: "确定",
              callback: () => {
                location.reload();
              },
            });
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    goFoodItem(index) {
      this.$router.push({
        path: "/showfood",
        query: {
          fid: this.myHistoryList[index].fid,
        },
      });
    },
  },
};
</script>

<style>
</style>